<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./01.css">
</head>

<body>
    <div class="box">
        <div class="top">
            <h3>图书管理</h3>
            <button class="add">+添加</button>
        </div>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>出版社</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>
        <div class="addmtk">
            <div class="mtktop">
                <span class="s1">添加图书</span>
                <button class="mtkx">x</button>
            </div>
            <div class="mtkbody">
                <div class="bookname">
                    <p class="p1">书名</p>
                    <input type="text" class="name" placeholder="请输入书籍名称">
                </div>
                <div class="bookzuozhe">
                    <p class="p1">作者</p>
                    <input type="text" class="zuozhe" placeholder="请输入作者名称">
                </div>
                <div class="bookchu">
                    <p class="p1">出版社</p>
                    <input type="text" class="chu" placeholder="请输入出版社名称">
                </div>
            </div>
            <div class="xia">
                <button class="qu">取消</button>
                <button class="bao">保存</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //渲染模块

        //获取表格内容
        const body = document.querySelector('tbody')
        const creator = "King"
        //封装一个函数
        const xuan = () => {
            axios({
                url: "https://hmajax.itheima.net/api/books",
                params: {
                    creator
                }
            }).then((res) => {
                console.log(res);
                //解构data
                const { data: { data } } = res
                //获取表格tabody 使用map方法获取每一个对象
                body.innerHTML = data.map((item, index) => {
                    //解构赋值
                    const { id, bookname, author, publisher } = item
                    return `
                    <tr>
                        <td class="id">${index + 1}</td>
                        <td>${bookname}</td>
                        <td>${author}</td>
                        <td>${publisher}</td>
                        <td data-id >
                            <span class="del" onclick="delte(${id})" >删除</span>
                            <span class="edit">编辑</span>
                        </td>
                    </tr>
                    `
                }).join('')

            })
        }
        //自己调用自己 渲染页面
        xuan()





        //添加模块
        //添加按钮
        const butadd = document.querySelector('.add');
        //添加模态框
        const mtkadd = document.querySelector('.addmtk');
        //添加模态框的内容
        const mtkbody = document.querySelector('.mtkbody');
        //模态框内容中的书本名称
        const name = document.querySelector('.name');
        //模态框内容中的书本作者
        const zuozhe = document.querySelector('.zuozhe');
        //模态框内容中的书本出版社
        const chu = document.querySelector('.chu');
        //模态框中右上角X号
        const mtkx = document.querySelector('.mtkx');
        //取消按钮
        const qu = document.querySelector('.qu');
        //保存按钮
        const bao = document.querySelector('.bao')
        
        
        //获取删除按钮
        const del = document.querySelector('.del')
        //添加模块
        butadd.addEventListener('click', event => {
            mtkadd.style.display = 'block';
            //点击右上角X号关闭模态框
            mtkx.addEventListener('click', event => {
                mtkadd.style.display = 'none';
            })
            //点击取消关闭模态框
            qu.addEventListener('click', event => {
                mtkadd.style.display = 'none';
            })
            //给保存按钮添加事件
            bao.addEventListener('click', event => {
                //获取名字
                const data1 = name.value;
                //获取作者
                const data2 = zuozhe.value;
                //获取出版社
                const data3 = chu.value;
                axios({
                    url: "https://hmajax.itheima.net/api/books",
                    method: 'POST',
                    data: {
                        creator,
                        bookname: data1,
                        author: data2,
                        publisher: data3
                    }
                }).then(res => {
                    //添加后重新渲染页面，将模态框中数据重置
                    xuan()
                    name.value = '';
                    zuozhe.value = '';
                    chu.value = '';
                    //渲染完模态框隐藏
                    mtkadd.style.display = 'none';
                })
            },{once:true})
        })



        //删除模块
        function delte(id) {
            axios({
                url: `https://hmajax.itheima.net/api/books/${id}`,
                method: 'DELETE',
                data: {
                    id:id
                }
            }).then(res => {
               
                alert('删除成功');
                xuan();
            })
        }
      
    </script>
</body>

</html>